<%@page import="at.com.vn.chess.entity.User"%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<%!String rootPath = "";%>
<%
	rootPath = application.getContextPath();
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>vn shogi - sign up</title>
<link href="<%=rootPath%>/pages/styles.css" type="text/css"
	media="screen" rel="stylesheet">
<script type="text/javascript">	
	function doSubmit() {	
		if(document.pressed == 'OK')  
		  {  
		   document.myform.action ="../RegisterServlet" + "?checkAvai=0"; 
			// Validation
			// when click OK
			if (validateForm() == true && ValidateEmail() == true) {
				return true;
			} 
		  }  
		  else 
		  if(document.pressed == 'check availability')  
		  {  
		    document.myform.action ="../RegisterServlet" + "?checkAvai=1";
			
			if (document.myform.name.value == "") {
				alert("please input user name");
				document.myform.name.focus();
			} else{
				return true;
			} 
		  }  
				
		return false;
	}
 
	function updateUNA()
	{
	   var cid = document.getElementById('name').value;
	   document.getElementById('btnCheck').disabled = !(/^[a-zA-Z0-9]{3,13}$/.test(cid));
	   document.getElementById('submit').disabled = !(/^[a-zA-Z0-9]{3,13}$/.test(cid));
	   
	}
 
	
	function validateForm() {
		if (document.myform.name.value == "") {
			alert("please input user name");
			document.myform.name.focus();
			return false;
		} else if (document.myform.pass.value == "") {
			alert("please input password");
			document.myform.pass.focus();
			return false;
		} else if (document.myform.pass.value != document.myform.cfmpass.value) {
			alert("password re-typed not correct");
			document.myform.cfmpass.focus();
			return false;
		}
		return true;
	}

	function emailcheck(str) {
		var at = "@";
		var dot = ".";
		var lat = str.indexOf(at);
		var lstr = str.length;
		var ldot = str.indexOf(dot);
		if (str.indexOf(at) == -1) {
			alert("Invalid E-mail ID");
			return false;
		}

		if (str.indexOf(at) == -1 || str.indexOf(at) == 0
				|| str.indexOf(at) == lstr) {
			alert("Invalid E-mail ID");
			return false;
		}

		if (str.indexOf(dot) == -1 || str.indexOf(dot) == 0
				|| str.indexOf(dot) == lstr) {
			alert("Invalid E-mail ID");
			return false;
		}

		if (str.indexOf(at, (lat + 1)) != -1) {
			alert("Invalid E-mail ID");
			return false;
		}

		if (str.substring(lat - 1, lat) == dot
				|| str.substring(lat + 1, lat + 2) == dot) {
			alert("Invalid E-mail ID");
			return false;
		}

		if (str.indexOf(dot, (lat + 2)) == -1) {
			alert("Invalid E-mail ID");
			return false;
		}

		if (str.indexOf(" ") != -1) {
			alert("Invalid E-mail ID");
			return false;
		}
		//alert("valid E-mail ID");
		return true;
	}

	function ValidateEmail() {
		var emailID = document.myform.email;

		/*
		 if ((emailID.value == null) || (emailID.value == "")) {
		 alert("Please Enter your Email Address");
		 emailID.focus();
		 return false;
		 }
		 */
		if ((emailID.value != null) && (emailID.value != "")) {
			if (emailcheck(emailID.value) == false) {
				emailID.value = "";
				emailID.focus();
				return false;
			}
		}
		return true;
	}
	function init() {
		document.forms[0].name.focus();
		
	}
</script>
</head>
<body id="login" onLoad="init()">

	<%
		String userId = "";
		String user_password = "";
		String user_email = "";

		String availMessage = (String) session.getAttribute("availMessage");
		User inputUser = (User) session.getAttribute("inputUser");

		session.removeAttribute("availMessage");
		session.removeAttribute("inputUser");

		if (inputUser != null) {
			userId = inputUser.getUser_id();
			user_password = inputUser.getUser_password();
			user_email = inputUser.getUser_email();
		}
	%>

	<div id="wrappertop"></div>
	<div id="wrapper">
		<div id="content">
			<div id="header">
				<h1>
					<a href="../"><img src="<%=rootPath%>/images/logo.png"
						alt="ChessApplication"> </a>
				</h1>
			</div>
			<div id="darkbanner" class="banner320">
				<h2>sign up</h2>
			</div>
			<div id="darkbannerwrap"></div>
			<form method="post" name="myform" onsubmit="return doSubmit();">
				<fieldset class="form">
					<%
						if (availMessage != null && !availMessage.equals("")) {
					%>
					<p class="error">
						<img src="<%=rootPath%>/images/error.png" height="16px"
							width="16px">
						<%=availMessage%>
					</p>
					<%
						}
					%>

					<p>
						<label for="user_name">Username*:</label> <input
							style="width: 150px;" name="name" id="name" value="<%=userId%>"
							onchange="updateUNA()" onkeyup="updateUNA()">
					</p>
					<p>only a-z letters and 0-9 digits.</p>
					<br>
					<p>
						<button name="btnCheck" id="btnCheck" type="submit"
							value="check availability" onclick="document.pressed=this.value">
							<img src="<%=rootPath%>/images/available.png" alt="Announcement"
								style="height: 17px; width: 25px;"> Check available
						</button>
					</p>
					<br>
					<p></p>
					<br>
					<p></p>
					<br>
					<p>
						<label for="password">password*:</label> <input type="password"
							style="width: 150px;" value="<%=user_password%>" name="pass">

					</p>
					<p>

						<label for="confirm_password">confirm password*:</label> <input
							type="password" style="width: 150px;" value="<%=user_password%>"
							name="cfmpass">
					</p>
					<p>
						<label for="email">email:</label> <input name="email"
							value="<%=user_email%>">
					</p>
					<p>
						<button type="submit" class="positive" name="submit" value="OK"
							id="submit" onclick="document.pressed=this.value">
							<img src="<%=rootPath%>/images/register.png" alt="Announcement"
								style="height: 17px;">Register
						</button>
					</p>
				</fieldset>
			</form>
		</div>
	</div>
	<div id="wrapperbottom_branding">
		<div id="wrapperbottom_back_text">
			<a href="javascript: window.history.go(-1)">Back</a>
		</div>
	</div>
	<jsp:include page="footer_copyright.jsp" />
</body>
</html>